<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery新浪微博</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="imgs/微博导航栏.jpg" alt="">
    </div>
    <!-- 内容区 -->
    <div class="content">
        <!-- 发布内容区 -->
        <img src="imgs/left.jpg" alt="" class="left">
        <div class="center">
            <textarea id="comment"></textarea>
            <input class="send" type="button" value="发布">
        </div>
        <img src="imgs/right.jpg" alt="" class="right">
        <!-- 已发布内容区 -->
        <div class="messageList">
            <!-- 分条的内容 -->
            <div class="info">
                <p class="infoText">NO.19「胡扯一下」女性文学与文以载道
                    *以下胡扯都是个人观点，不代表真理，拒绝抬杠，你杠你对，不想听我胡扯的还可以静音吸猫。
                    ——
                    上一期我们简单聊了一下耽美文学的相关话题，然后之前还有一期是聊到了关于言情小说的话题，耽美和言情这都是很典型的女性文学，从其中又可以延伸出一个点，就是我 ​​​​..</p>
                <!-- 设置时间显示和点赞、删除按钮 -->
                <p class="infoOperation">
                    <span class="infoTime">2020-9-16 17:30:18</span>
                    <span class="infoHandle">
                        <a href="javascript:;"><svg t="1600258237608" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4135" width="200" height="200">
                                <path
                                    d="M995.46 434.45a82.52 82.52 0 0 0-66.84-33.58H630c19.44-82 58.71-276.28 14.81-350.77-10.51-17.79-25.59-29.56-43.63-34.1-32.2-8.11-62.63-3.82-88.05 12.29-50.45 31.9-65 98.17-66.73 107.12C426.93 271.8 302.11 377 271.69 400.87h-93a27.76 27.76 0 0 0-27.78 27.78v555.54a27.76 27.76 0 0 0 27.75 27.81H754a138 138 0 0 0 133-99l121.44-404.86a82.57 82.57 0 0 0-12.98-73.69z m-40.26 57.73L833.76 897A82.82 82.82 0 0 1 754 956.41H206.44v-500h69.44c0.74 0 1.35-0.36 2.08-0.42a27.36 27.36 0 0 0 19.24-4.76c7.3-5.21 178.73-129.47 203.93-306.42 2.58-12.83 15.73-53.14 41.69-69.58 12.64-7.95 27.32-9.68 44.89-5.34 1.36 0.35 5 1.27 9.22 8.41 31.14 52.84-1.46 238.55-29.32 343.17a26.34 26.34 0 0 0-0.22 3.54 26 26 0 0 0-0.73 3.62c0 0.68 0.34 1.25 0.39 1.93a26.64 26.64 0 0 0 1.11 5.47 24.29 24.29 0 0 0 12.26 16 26.54 26.54 0 0 0 5.17 2.56c0.61 0.21 1.06 0.67 1.69 0.84a27.39 27.39 0 0 0 7.11 0.94h334.23a27.75 27.75 0 0 1 26.58 35.75zM39.78 400.87A27.76 27.76 0 0 0 12 428.65v555.54a27.78 27.78 0 0 0 55.55 0V428.65a27.76 27.76 0 0 0-27.77-27.78z"
                                    p-id="4136"></path>
                            </svg>0</a>
                        <a href="javascript:;"><svg t="1600258326556" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4764" width="200" height="200">
                                <path
                                    d="M362.666667 85.333333h320a106.666667 106.666667 0 0 1 106.666666 106.666667v440.192c-0.192 13.866667-2.624 52.736-36.864 82.154667l-41.749333 34.773333A48255.04 48255.04 0 0 1 468.48 946.346667a85.333333 85.333333 0 0 1-132.330667-78.72l16.853334-164.053334a106.88 106.88 0 0 1-5.226667-0.597333C188.906667 689.962667 64 556.906667 64 394.666667 64 234.773333 185.301333 102.208 340.906667 85.973333l6.890666-0.64c4.842667-0.682667 9.813333 0 14.869334 0z m362.666666 106.666667a42.666667 42.666667 0 0 0-42.666666-42.666667H360.768l-6.549333-0.256 2.56-0.384-10.069334 1.024C223.36 163.029333 128 268.586667 128 394.666667c0 127.936 98.346667 234.154667 225.002667 244.522666l9.493333 1.066667a64 64 0 0 1 54.165333 69.845333l-16.768 163.306667a21.333333 21.333333 0 0 0 31.36 20.714667l224.874667-182.976c8.896-7.296 16.810667-13.802667 23.744-19.541334l30.890667-25.792a39.04 39.04 0 0 0 8.277333-9.770666c4.117333-6.933333 5.802667-13.930667 6.208-22.357334l0.106667-4.266666L725.333333 192z"
                                    fill="#212121" p-id="4765"></path>
                                <path
                                    d="M896 106.666667m32 0l0 0q32 0 32 32l0 512q0 32-32 32l0 0q-32 0-32-32l0-512q0-32 32-32Z"
                                    fill="#212121" p-id="4766"></path>
                            </svg>0</a>
                        <a href="javascript:;">删除</a>
                    </span>
                </p>
            </div>
        </div>
    </div>
    <!-- 页码区 -->
    <div class="page">
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
    </div>

    <script src="./js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
</body>

</html>